{{ define "content" }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <div class="well" style="overflow: auto">
                    <form class="form-horizontal" role="form" method="get" action="{{ .Request.URL.Path }}" id="search-form" novalidate>
                        <input type="hidden" value="" name="from" />
                        <input type="hidden" value="" name="to" />
                        <div class="col-md-6">
                            {{ i18n "Date range" . }}
                            <fieldset>
                                <div class="control-group">
                                    <div class="controls">
                                        <div class="input-prepend input-group">
                                            <span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
                                            <input type="text" id="search-date" class="form-control" value="{{ if and .date_from .date_to }}{{ .date_from.Format "2006.01.02 15:04" }} - {{ .date_to.Format "2006.01.02 15:04" }}{{ end }}" />
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col-md-2">
                            &nbsp;
                            <fieldset>
                                <div class="control-group">
                                    <div class="controls">
                                        <div class="input-prepend input-group">
                                            <button type="submit" class="btn btn-success">{{ i18n "Search" . }}</button>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </form>
                </div>
                {{ if .files }}
                    {{ block "paginator" . }} {{ end }}
                    <div class="row">
                        <p class="text-center">{{ i18n "Showing %d to %d of %d entries (total size %s)" . nil nil nil (add .offset_left 1) .offset_right .files_total (human_bytes .size_total) }}</p>
                        {{ range $file := .files }}
                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                <img style="width: 100%; display: block;" src="?action=thumbnail&file={{ $file.Name }}" alt="image" />
                                <div class="caption text-center">
                                    <h3>{{ $file.Name }}</h3>
                                    <p><a href="?action=download&file={{ $file.Name }}" class="btn btn-primary" role="button">{{ i18n "Download %s" $ nil nil nil (human_bytes $file.Size) }}</a></p>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                        <p class="text-center">{{ i18n "Showing %d to %d of %d entries (total size %s)" . nil nil nil (add .offset_left 1) .offset_right .files_total (human_bytes .size_total) }}</p>
                    </div>
                    {{ block "paginator" . }} {{ end }}
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "paginator" }}
<div class="row text-center">
    <nav aria-label="Page navigation">
        <ul class="pagination">
        {{ if gt .page 1 }}
            <li><a href="?page=1{{ if .date_from }}&from={{ .date_from.Format "2006-01-02T15:04:05-07:00" }}{{ end }}{{ if .date_to }}&to={{ .date_to.Format "2006-01-02T15:04:05-07:00" }}{{ end }}" aria-label="First"><span aria-hidden="true">&laquo;</span></a></li>
        {{ end }}

        {{ range $n := untilStep (int (sub .page 3)) (int (add .page 4)) 1 }}
            {{ if and (gt $n 0) (le $n $.pages) }}
                {{ if eq $.page $n }}
                    <li class="active"><span>{{ $n }}</span></li>
                {{ else }}
                    <li><a href="?page={{ $n }}{{ if $.date_from }}&from={{ $.date_from.Format "2006-01-02T15:04:05-07:00" }}{{ end }}{{ if $.date_to }}&to={{ $.date_to.Format "2006-01-02T15:04:05-07:00" }}{{ end }}">{{ $n }}</a></li>
                {{ end }}
            {{ end }}
        {{ end }}

        {{ if lt (add .page 1) .pages }}
            <li><a href="?page={{ .pages }}{{ if .date_from }}&from={{ .date_from.Format "2006-01-02T15:04:05-07:00" }}{{ end }}{{ if .date_to }}&to={{ .date_to.Format "2006-01-02T15:04:05-07:00" }}{{ end }}" aria-label="Last"><span aria-hidden="true">&raquo;</span></a></li>
        {{ end }}
        </ul>
    </nav>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/bootstrap-daterangepicker/css/daterangepicker.min.css" false) }}

<style type="text/css">
    .thumbnail {
        height: auto;
    }
</style>
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/moment/js/moment.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/bootstrap-daterangepicker/js/daterangepicker.min.js" false) }}

    <script type="application/javascript">
        $(document).ready(function () {
            $('#search-date').daterangepicker({
                timePickerIncrement: 60,
                minDate: moment().subtract(5, 'year'),
                maxDate: moment().endOf('day'),
                applyButtonClasses: 'btn-success',
                locale: {
                    format: 'YYYY.MM.DD HH:mm'
                },
                ranges: {
                    '{{ i18n "Today" . "daterangepicker" "boggart" }}': [moment().startOf('day'), moment()],
                    '{{ i18n "Yesterday" . "daterangepicker" "boggart" }}': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    '{{ i18n "This week" . "daterangepicker" "boggart" }}': [moment().startOf('isoWeek'), moment().endOf('isoWeek')],
                    '{{ i18n "Last week" . "daterangepicker" "boggart" }}': [moment().subtract(1, 'isoWeek').startOf('isoWeek'), moment().subtract(1, 'isoWeek').endOf('isoWeek')],
                    '{{ i18n "This month" . "daterangepicker" "boggart" }}': [moment().startOf('month'), moment().endOf('month')],
                    '{{ i18n "Last month" . "daterangepicker" "boggart" }}': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    '{{ i18n "This year" . "daterangepicker" "boggart" }}': [moment().startOf('year'), moment().endOf('year')],
                    '{{ i18n "Last year" . "daterangepicker" "boggart" }}': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
                },
            });

            $('#search-form').submit(function (e) {
                var dp = $('#search-date').data('daterangepicker');

                $('#search-form input[name="from"]').val(moment(dp.startDate).format('YYYY-MM-DD[T]HH:mm:ssZ'));
                $('#search-form input[name="to"]').val(moment(dp.endDate).format('YYYY-MM-DD[T]HH:mm:ssZ'));
            });
        });
    </script>
{{ end }}